@extends('layouts.wx')
<iframe id="mapPage" style="display: none;" width="100%" height="100%" frameborder=0
        src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
</iframe>
@section('content')

<div class="weui-cells weui-cells_form" id="main">
    <form action="{{ route('order') }}" name="fm_order" method="post" onsubmit="return checkForm()">
        <input type="hidden" name="start_address">
        <input type="hidden" name="end_address">
        <input type="hidden" name="start_lng">
        <input type="hidden" name="start_lat">
        <input type="hidden" name="end_lng">
        <input type="hidden" name="end_lat">
        {{csrf_field()}}
        {{--<div class="weui-cell weui-cell_vcode">--}}
            {{--<div class="weui-cell__hd">--}}
                {{--<label class="weui-label">手机号</label>--}}
            {{--</div>--}}
            {{--<div class="weui-cell__bd">--}}
                {{--<input class="weui-input" type="tel" placeholder="请输入手机号">--}}
            {{--</div>--}}
            {{--<div class="weui-cell__ft">--}}
                {{--<button class="weui-vcode-btn">获取验证码</button>--}}
            {{--</div>--}}
        {{--</div>--}}
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" name="phone" placeholder="请输入手机号" value="{{$member->phone or ''}}">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="name"  placeholder="真实姓名" value="{{$member->name or ''}}">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">出发地</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="start" readonly="readonly" onclick="selectAddress('start')"   placeholder="">

            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">目的地</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="end" readonly="readonly" onclick="selectAddress('end')"  placeholder="">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">乘车时间</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="datetime-local" name="date" value="" placeholder="">
            </div>
        </div>
        <button type="submit"  class="weui-btn weui-btn_primary">提交</button>
    </form>
</div>
@endsection
@section('js')
<script>
    var address_type;
    function selectAddress(type) {
        address_type = type;
        $('#main').hide();
        $('#mapPage').show();
    }
    
    function  checkForm() {
        var phone = $('input[name="phone"]').val();
        if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))){
            alert("手机号码格式错误！");
            return false;
        }

        var name = $('input[name="name"]').val();
        if($.trim(name)==''){
            alert("姓名必须填写！");
            return false;
        }

        var start_place = $('input[name="start"]').val();
        if($.trim(start_place)==''){
            alert("请选择出发地！");
            return false;
        }

        var end_place = $('input[name="end"]').val();
        if($.trim(end_place)==''){
            alert("请选择目的地！");
            return false;
        }

        var date = $('input[name="date"]').val();
        if($.trim(date)==''){
            alert("请选择乘车时间！");
            return false;
        }

        return true;
    }

    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            console.log('location', loc);
            if(address_type=='start') {
                $('input[name="start"]').val(loc.poiname);
                $('input[name="start_address"]').val(loc.poiaddress);
                $('input[name="start_lat"]').val(loc.latlng.lat);
                $('input[name="start_lng"]').val(loc.latlng.lng);
            } else {
                $('input[name="end"]').val(loc.poiname);
                $('input[name="end_address"]').val(loc.poiaddress);
                $('input[name="end_lat"]').val(loc.latlng.lat);
                $('input[name="end_lng"]').val(loc.latlng.lng);
            }
            $('#main').show();
            $('#mapPage').hide();
        }
    }, false);
</script>

@endsection
